import { Table, Radio , Col, Row, Statistic,Divider ,Select } from 'antd';
import { FormattedMessage, connect, formatMessage, Dispatch } from 'umi';
import React, { useState, useEffect} from 'react';
import ECharts from 'echarts-for-react';
import * as echarts from 'echarts';
const { Option } = Select;
import { GridContent } from '@ant-design/pro-layout';
import cloneDeep from 'lodash.clonedeep';
import BarChart from '../../energyAnalysis/components/barChart';
import styles from './style.less'
const { Column } = Table;





const Survey: React.FC = () => {
  const dataSource = [
    {
      num:1,
      equipmentArea: '山西',
      hiddenScore : 0,
      equipmentNum: 10,
      lowAlarmNumber: 0,
      middleAlarmNumber:0,
      highAlarmNumber:0
    },
    {
      num:1,
      equipmentArea: '山西',
      hiddenScore : 0,
      equipmentNum: 10,
      lowAlarmNumber: 0,
      middleAlarmNumber:0,
      highAlarmNumber:0
    },
  ];
  
const [size,setSize] = useState<string>('1')
var dataAxis = ['0','00', '01', '02', '03', '04', '05', '06', '07', '08', '09'];
var data = [0,0,0,5,0,8,0,10,0];
var name="报警趋势";
var chart={
  dataAxis:dataAxis,
  data:data,
  name:name,
  type:'line',
  legendShow:false
}
const DEFAULT_OPTION  = {
  color: ["#bdbcfe", "#fcdcdf","rgb(252 112 96)"],
  tooltip: {
      trigger: 'item'
  },
  title: {
    text: "报警",
    style:{backgroundColor: '#ccc'},
    
    left: "center",
    top: "center",
    textStyle: {
      fontSize: 24,
      color: 'white'
    },
  },
  legend: {
    show:false
  },
  series: [
      {
          name: '报警分类',
          type: 'pie',
          radius: ['50%', '70%'],
          data: [
                {value: 10, name: '高报警'},
                {value: 2, name: '中报警'},
                {value: 1, name: '低报警'},
          
          ]
      }
  ]
};
const [option, setOption] = useState(DEFAULT_OPTION);
const [charOption, setChartOption] = useState(chart);
    function handleSizeChange (e) {
      setSize(e.target.value )
     
   
    }
    
  


    return (
      <GridContent>
      <React.Fragment>

          <Row   gutter={[0,24]} style={{marginBottom:12}}>
            <Col xl={8} lg={8} md={10} sm={24} xs={24}  >
              <div  className={ styles.box}  style={{marginRight:15,height:'100%'}}>
                <Row className={styles.sinTitle}><span className={styles.signLine}></span><span>报警数量(个)</span></Row>
                <Row gutter={24} style={{ margin:0,marginBottom:'7px'}}>
                  <Col xl={8} lg={8} md={8} sm={8} xs={8} className={styles.huanbiitem}>
                      <p className={styles.number}>5</p>
                      <p className={styles.bt}>今日报警数</p>
                  </Col>
                  <Col xl={8} lg={8} md={8} sm={8} xs={8} className={styles.huanbiitem} >
                      <p className={styles.number}>7</p>
                      <p className={styles.bt}>昨日同期</p>
                  </Col>
                  <Col xl={8} lg={8} md={8} sm={8} xs={8} className={styles.huanbiitem} >
                      <div    className={styles.qushiTop}>
                        <p>-28.57%</p>
                        <p   className={styles.down}>-2</p>
                      </div>
                      <p className={styles.bt}>趋势</p>
                  </Col>
                </Row> 
                <Row gutter={24} style={{margin:0, marginBottom:'7px'}}>
                  <Col xl={8} lg={8} md={8} sm={8} xs={8} className={styles.huanbiitem}>
                      <p className={styles.number}>272</p>
                      <p className={styles.bt}>当月报警数</p>
                  </Col>
                  <Col xl={8} lg={8} md={8} sm={8} xs={8} className={styles.huanbiitem} >
                      <p className={styles.number}>226</p>
                      <p className={styles.bt}>上月同期</p>
                  </Col>
                  <Col xl={8} lg={8} md={8} sm={8} xs={8} className={styles.huanbiitem} >
                      <div    className={styles.qushiTop}>
                        <p>+20.35%</p>
                        <p   className={styles.down}>+46</p>
                      </div>
                      <p className={styles.bt}>趋势</p>
                  </Col>
                </Row> 
                <Row gutter={24}  style={{margin:0}}>
                  <Col xl={8} lg={8} md={8} sm={8} xs={8} className={styles.huanbiitem}>
                      <p className={styles.number}>1735</p>
                      <p className={styles.bt}>今年报警数</p>
                  </Col>
                  <Col xl={8} lg={8} md={8} sm={8} xs={8} className={styles.huanbiitem} >
                      <p className={styles.number}>0</p>
                      <p className={styles.bt}>去年同期</p>
                  </Col>
                  <Col xl={8} lg={8} md={8} sm={8} xs={8} className={styles.huanbiitem} >
                      <div    className={styles.qushiTop}>
                        <p>+--</p>
                        <p   className={styles.down}>+1735</p>
                      </div>
                      <p className={styles.bt}>趋势</p>
                  </Col>
                </Row> 
                </div>
            </Col>
            <Col xl={16} lg={16} md={14} sm={24} xs={24} className={ styles.box}>
              <Row className={styles.sinTitle}><span className={styles.signLine}></span><span>报警趋势</span></Row>
              <Row style={{justifyContent: 'flex-end'}}>
                <Radio.Group value={{size}}  onChange={handleSizeChange} className={styles.qushiShanxuan}>
                  <Radio.Button value="1" className={size=='1'?styles.btnSelected:''}>今日</Radio.Button>
                  <Radio.Button value="2"  className={size=='2'?styles.btnSelected:''}>本月</Radio.Button>
                  <Radio.Button value="3"  className={size=='3'?styles.btnSelected:''}>全年</Radio.Button>
                </Radio.Group>
              </Row>
              <BarChart charOption={charOption} style={{ height: 400, width: '100%',marginBottom:20 }} />
            </Col>
         
          </Row>


          <Row   gutter={[0,24]}>
            <Col xl={8} lg={8} md={10} sm={24} xs={24}  >
              <div  className={ styles.box}  style={{marginRight:15,height:'100%'}}>
                   <ECharts option={option} style={{ width: '100%' }} />
                </div>
            </Col>
            <Col xl={16} lg={16} md={14} sm={24} xs={24} className={ styles.box}>
              <Row className={styles.sinTitle}><span className={styles.signLine}></span><span>报警分类</span></Row>
              <Table dataSource={dataSource}   pagination={{ position: ['none','none'] }} >
                <Column title="序号" dataIndex="num" key="num" />
                <Column className={styles.bold} title="设备区域" dataIndex="equipmentArea" key="equipmentArea" />
                <Column title="隐患评分" dataIndex="hiddenScore" key="hiddenScore" />
                <Column title="设备数量" dataIndex="equipmentNum" key="equipmentNum" />
                <Column  className={styles.bold}  title="低报警数" dataIndex="lowAlarmNumber" key="lowAlarmNumber" />
                <Column  className={styles.bold}  title="中报警数" dataIndex="middleAlarmNumber" key="middleAlarmNumber" />
                <Column   className={styles.bold}  title="高报警数" dataIndex="highAlarmNumber" key="highAlarmNumber" />
              </Table>
            </Col>
         
          </Row>
  
  
        </React.Fragment>
      </GridContent>
    );
};

export default Survey;